<template>
  <div id="app">
   <div id="nav">
     <router-link class="all" to="/all"><i class="iconfont icon-wode"></i>all</router-link>
     <router-link class="cart" to="/cart"><i class="iconfont icon-gouwuche"></i>car</router-link>
      <router-link class="music" to="/music"><i class="iconfont icon-yinyue"></i>Music</router-link>
      <router-link class="mv" to="/mv"><i class="iconfont icon-shipin"></i> mv</router-link>
   </div>
   <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app',
}
</script>
<style lang="less">
#app #nav .router-link-exact-active{
  color:blue;
}
#app {
 margin-left: auto;
 margin-right: auto;
 font-size: 35px;
 padding-bottom: 80px;
}
#nav {
  display: flex;
  justify-content: space-evenly;
  position: fixed;
  bottom: 0px; 
  background: #ffff;
  width: 100%;
}
.music,.mv,.all,.cart{
  color: #333;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  text-align: center;
  font-size: 10px;
}
.router-link-exact-active{
  color: red;
}
.iconfont{
  font-size: 20px;
}
</style>
